<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型实例</title>
    <link rel="stylesheet" href="lab3-1.css">
</head>
<body>
    <div class="container">
        <h1>CSS盒子模型详解</h1>
        
        <div class="model-comparison">
            <div class="box-model-example">
                <h2>标准盒子模型 (content-box)</h2>
                <div class="standard-box">
                    <div class="box-content">
                        <p>内容区域</p>
                        <p>width: 200px</p>
                        <p>height: 100px</p>
                    </div>
                </div>
                <div class="box-dimensions">
                    <p>总宽度 = 200px(内容) + 40px(内边距) + 10px(边框) = 250px</p>
                    <p>总高度 = 100px(内容) + 40px(内边距) + 10px(边框) = 150px</p>
                </div>
            </div>
            
            <div class="box-model-example">
                <h2>IE盒子模型 (border-box)</h2>
                <div class="ie-box">
                    <div class="box-content">
                        <p>内容区域</p>
                        <p>width: 200px</p>
                        <p>height: 100px</p>
                    </div>
                </div>
                <div class="box-dimensions">
                    <p>总宽度 = 200px (已包含内边距和边框)</p>
                    <p>总高度 = 100px (已包含内边距和边框)</p>
                </div>
            </div>
        </div>
        
        <div class="visual-representation">
            <h2>盒子模型可视化</h2>
            <div class="visual-box">
                <div class="margin-area">
                    <span class="area-label">外边距 (Margin)</span>
                    <div class="border-area">
                        <span class="area-label">边框 (Border)</span>
                        <div class="padding-area">
                            <span class="area-label">内边距 (Padding)</span>
                            <div class="content-area">
                                <span class="area-label">内容 (Content)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="box-properties">
            <h2>盒子模型属性详解</h2>
            <div class="properties-grid">
                <div class="property-item">
                    <h3>内容 (Content)</h3>
                    <p>元素的实际内容区域，尺寸由width和height属性控制</p>
                </div>
                <div class="property-item">
                    <h3>内边距 (Padding)</h3>
                    <p>内容与边框之间的空间，透明背景，可使用padding属性设置</p>
                </div>
                <div class="property-item">
                    <h3>边框 (Border)</h3>
                    <p>围绕内容和内边距的边界线，可设置样式、宽度和颜色</p>
                </div>
                <div class="property-item">
                    <h3>外边距 (Margin)</h3>
                    <p>盒子与其他元素之间的空间，透明背景，可使用margin属性设置</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>